<template>
	<view class="coupon">
		<view v-for="(item,index) in list" :key="index" style="width: 710rpx;height: 240rpx;border-radius: 24rpx;margin:16rpx auto;position: relative;">
			<image v-if="type==index" style="width: 710rpx;height: 240rpx;" :src="this.$loadImage('coupon')"></image>
			<image v-else style="width: 710rpx;height: 240rpx;" :src="this.$loadImage('couponUsed')"></image>
			<view class="flex" @click="type=index" style="position: absolute;top:0;left:0;">
				<view style="width:484rpx;text-align: center;margin-top:16rpx;">
					<view style="font-size: 32rpx;font-weight: bold;padding:38rpx 0 10rpx;">{{item.title}}</view>
					<view class="flexJusp">
						<view></view>
						<view style="padding:2rpx 28rpx;background: #F0F0F0;border-radius: 20rpx;font-size: 24rpx;color: #666666;">满{{item.manprice||''}}减{{item.jianprice||''}}</view>
						<view></view>
					</view>
					<view style="font-size: 22rpx;color: #666666;margin-top:20rpx;">有效期：{{item.starttime.substring(0, 13)}}~{{item.endtime.substring(0, 13)}}</view>
				</view>
				<view style="text-align: center;width:226rpx;">
					<view style="font-size: 28rpx;font-weight: bold;color: #FFFFFF;padding:50rpx 0 26rpx;">￥<text style="font-size:50rpx;" v-if="item.kind==1">{{item.jianprice}}</text><text style="font-size:50rpx;" v-else>{{item.price}}</text> </view>
					<image v-if="type==index" style="width: 40rpx;height: 40rpx;margin:16rpx 0 0 112rpx;" src="/static/image/03_10w.png"></image>
					<image v-else style="width: 40rpx;height: 40rpx;margin:16rpx 0 0 112rpx;" src="/static/image/03_10hn.png"></image>
				</view>
			</view>
		</view>
		<view class="buttons" @click="detail">立即使用</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:0,
				list:[],
				kind:'',
				price:0
			};
		},
		onLoad(option) {
			if(option.price){
				this.price = option.price
			}
			this.kind = option.kind
			this.loads()
		},
		methods:{
			loads(){
				this.$httpapi('youhuiquan', 'POST', {flag:1,kind:this.kind}).then(res => {
					if(this.kind==1){
						var lists = []
						for(let i=0;i<res.data.length;i++){
							if(this.price>res.data[i].manprice){
								lists.push(res.data[i])
							}
						}
						this.list = lists
					}else{
						this.list = res.data
					}
				})
			},
			orders(){
				uni.switchTab({
					url:'/pages/PlaceOrder/PlaceOrder'
				})
			},
			detail(item){
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('acceptDataFromOpenedPages', this.list[this.type]);
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F6FA;
	}
.coupon{
	.nav{
		padding:0 50rpx;
		width: 650rpx;
		height: 64rpx;
		line-height:58rpx;
		background: #FFFFFF;
		font-size: 28rpx;
		color: #333333;
		.xuan{
			font-size: 30rpx;
			font-weight: bold;
		}
		.xian{
			width: 88rpx;
			height: 6rpx;
			background: #2089FF;
			border-radius: 4rpx;
			margin: auto;
		}
	}
	.buttons {
		margin: 100rpx auto 0;
		text-align: center;
		width: 710rpx;
		height: 88rpx;
		background: linear-gradient(180deg, #EF5347 0%, #FD7575 100%);
		border-radius: 44rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 88rpx;
	}
}
</style>
